<template>
  <div class="index-container">
    <el-row :gutter="10">
      <el-col :span="5">
        <el-card class="box-card" :style="'height:'+height+'px;overflow-y:auto'">
          <el-tree id="el-tree" class="filter-tree" style="margin-top:10px" :default-expand-all="true" :data="tree"
            :props="defaultProps" @node-click="handleNodeClickLeft" @node-contextmenu="handleNodeClick"></el-tree>
          <div id="treemenu" v-if="treemenuDisplay" class="tree_menu" :style="{...rightMenu}">
            <el-dropdown @command="handleTreeMenuClick">
              <el-dropdown-item icon="el-icon-edit" command="edit">编辑</el-dropdown-item>
              <el-dropdown-item icon="el-icon-delete" v-if="nodeData.parent_id != 1&&nodeData.id != 1"
                command="delete">删除</el-dropdown-item>
              <el-dropdown-item icon="el-icon-circle-plus" v-if="nodeData.id == 1" command="add">新增分类</el-dropdown-item>
              <el-dropdown-item icon="el-icon-circle-plus" v-if="nodeData.parent_id == 1"
                command="addReport">新增报表</el-dropdown-item>
            </el-dropdown>
          </div>
        </el-card>
      </el-col>
      <el-col :span="19">
        <el-card class="box-card" :style="'height:'+height+'px;overflow-y:auto'">
          <el-row>
            <template>
              <el-form ref="form" :model="form" :rules="rules" size="mini" label-width="110px">
                <el-form-item label="报表名称" prop="name">
                  <el-input v-model="form.name" readonly :style="{width: '100%'}"></el-input>
                </el-form-item>
                <el-form-item label="描述" prop="description">
                  <el-input v-model="form.description" placeholder="描述" clearable :style="{width: '100%'}"></el-input>
                </el-form-item>
                <el-form-item label="SQL表达" prop="r_sql">
                  <el-input v-model="form.r_sql" type="textarea" placeholder="请输入SQL表达"
                    :autosize="{minRows: 8, maxRows: 8}" :style="{width: '100%'}"></el-input>
                </el-form-item>
                <el-form-item label="列名(,分割)" prop="r_where">
                  <el-input v-model="form.r_column" placeholder="请输入列名(,分割)" clearable :style="{width: '100%'}">
                  </el-input>
                </el-form-item>
                <el-form-item label="where(,分割)" prop="r_where">
                  <el-input v-model="form.r_where" placeholder="请输入where(,分割)" clearable :style="{width: '100%'}">
                  </el-input>
                </el-form-item>
                <el-form-item label="注释" prop="note">
                  <el-input v-model="form.note" type="textarea" placeholder="请输入注释" :autosize="{minRows: 6, maxRows: 6}"
                    :style="{width: '100%'}"></el-input>
                </el-form-item>
                <el-form-item size="large">
                  <el-button type="primary" @click="submitForm">保存</el-button>
                  <el-button @click="scan">预览</el-button>
                </el-form-item>
              </el-form>
            </template>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog :title="form.name" :visible.sync="dialogScanVisible" width="600px">
      <el-form :model="form" size="mini" label-width="80px">
        <el-form-item v-for="(item,index) in where" :key="index" :label="item.split('|')[0]">
          <el-input v-if="item.split('|')[1]!='date'" v-model="select_where[index]" autocomplete="off"></el-input>
          <el-date-picker v-if="item.split('|')[1]=='date'" v-model="select_where[index]" value-format="yyyy-MM-dd"
            type="date" placeholder="选择日期" style="width:100%"></el-date-picker>
        </el-form-item>
      </el-form>
      <div style="color:red;width:80px;text-align:right;float:left">注释：</div>
      <div style="margin-left: 80px">{{form.note}}</div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogScanVisible = false">取 消</el-button>
        <el-button type="primary" @click="scanConfirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import * as api from '@/api/coder/report'

  export default {
    name: 'Report',
    data() {
      return {
        height: document.documentElement.clientHeight - 265,
        tree: [],
        nodeData: {},
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        treemenuDisplay: false,
        form: {
          region:undefined,
          name: undefined,
          description: undefined,
          r_sql: undefined,
          r_where: undefined,
          note: undefined,
        },
        rules: {
          name: [{
            required: true,
            message: '',
            trigger: 'blur'
          }],
          description: [],
          r_sql: [{
            required: true,
            message: '请输入SQL表达',
            trigger: 'blur'
          }],
          r_where: [],
          note: [],
        },
        dialogScanVisible: false,
        where: [],
        select_where: []
      }
    },
    created() {
      this.getTree();
    },
    methods: {
      getTree() {
        api.getReportList().then(res => {
          this.tree = res;
        })
      },
      handleNodeClickLeft(data) {
        if (data.children.length == 0) {
          this.form = data;
        }
      },
      handleNodeClick(e, data) {
        this.nodeData = data;
        this.treemenuDisplay = true;
        this.rightMenu = {
          top: e.pageY + 'px',
          left: e.pageX + 'px'
        };
        var _this = this;
        document.onclick = function(ev) {
          if (ev.target !== document.getElementById('treemenu')) {
            _this.treemenuDisplay = false
          }
        }
      },
      handleTreeMenuClick(command) {
        var _this = this;
        if (command == "edit") {
          this.$prompt('', '修改名称', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            inputValue: this.nodeData.name
          }).then(({
            value
          }) => {
            api.updateName(this.nodeData.id, value).then(res => {
              this.$message({
                message: res.msg,
                type: 'success'
              });
              this.getTree();
            })
          })
        } else if (command == "add") {
          this.$prompt('请输入分类名称', '新增分类', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            inputValue: ''
          }).then(({
            value
          }) => {
            api.add(value).then(res => {
              this.$message({
                message: res.msg,
                type: 'success'
              });
              this.getTree();
            })
          })
        } else if (command == "addReport") {
          this.$prompt('请输入报表名称', '新增报表', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            inputValue: ''
          }).then(({
            value
          }) => {
            api.addReport(this.nodeData.id, value).then(res => {
              this.$message({
                message: res.msg,
                type: 'success'
              });
              this.getTree();
            })
          })
        } else if (command == "delete") {
          this.$confirm('确认要删除该报表吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            api.delReport(this.nodeData.id).then(res => {
              this.$message({
                message: res.msg,
                type: 'success'
              });
              this.getTree();
            })
          })
        }
      },
      submitForm() {
        var _this = this;
        this.$refs['form'].validate(valid => {
          if (!valid) return
          api.save(this.form).then(res => {
            this.$message({
              message: res.msg,
              type: 'success'
            });
          })
        })
      },
      scan() {
        if (this.form.r_where != null && this.form.r_where != '') {
          this.where = this.form.r_where.split(",");
          this.dialogScanVisible = true;
        } else {
          this.scanConfirm();
        }

      },
      scanConfirm() {
        this.dialogScanVisible = false
        this.$router.replace({
          path: '/redirect/reportscan',
          query: {
            params: this.select_where,
            id: this.form.id
          }
        })
      }
    }
  }
</script>

<style scoped>
  .tree_menu {
    position: fixed;
    display: block;
    z-index: 20000;
    background-color: #fff;
    padding: 10px 0px 10px 0px;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    line-height: 25px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
  }
</style>
